import { DatePicker, Form } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker';
import dayjs from 'dayjs';
import { forwardRef, useImperativeHandle } from 'react';
import { EditExpireFormProps, TFolderRef } from './interface';
const rules = (text: string) => {
  return [{ required: true, message: `请选择${text}` }];
};
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 15 },
};
const EditExpireModal = forwardRef<TFolderRef, EditExpireFormProps>((props, ref) => {
  const { startTime, endTime, studyCardId, personName } = props;
  const [form] = Form.useForm<any>();
  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
    return current && current < dayjs(startTime);
  };
  const onSubmit = () => {
    return form
      .validateFields()
      .then((val) => {
        const finalValues = { ...val, studyCardId: studyCardId, personName: personName };
        return Promise.resolve(finalValues);
      })
      .catch((err) => {
        // message.error(' ERR ');
        console.log(err, 'err');
        return Promise.reject(err);
      });
  };
  useImperativeHandle(ref, () => ({
    onSubmit,
  }));
  return (
    <div style={{ padding: '16px 16px 0' }}>
      <Form layout="horizontal" form={form} {...formItemLayout}>
        <Form.Item name="time" label="有效期">
          {startTime || '--'} 至 {endTime || '--'}
        </Form.Item>
        <Form.Item name="endTime" required label="更改到期时间" rules={rules('更改到期时间')}>
          <DatePicker disabledDate={disabledDate} />
        </Form.Item>
      </Form>
    </div>
  );
});
export default EditExpireModal;
